<template>
	<!-- 墨运地图 -->
	<view class="map">
		<map style="width: 100%; height: 400rpx;" 
		:latitude="latitude" 
		:longitude="longitude" 
		:markers="markers" 
		polyline="polyline" 
		enable-3D 
		enable-traffic 
		show-location
		enable-rotate
		@tap="tap"
		>
		</map>
	</view>
</template>

<script setup>
import {ref} from "vue"
const id=0;
// 纬度
const latitude=ref(22.530314);
// 经度
const longitude=ref(113.39284)
// 标记点
const markers=[
	{
	id:1,
	title:"骑手",
	latitude:latitude.value,
	longitude:longitude.value,
	iconPath:"/static/images/position.png",
	width:50,  // 添加宽度
	height: 50  // 添加高度
	},
	{
	id:2,
	latitude:22.531361,
	longitude:113.391597,
	iconPath:"/static/images/position.png",
	width: 50,  // 添加宽度
	height: 50  // 添加高度
	}
	
]
// 路线
const polyline=[{
		points:[
			{latitude:latitude.value,longitude:longitude.value},
			{latitude:22.531361,
	longitude:113.391597}
		],
		color:"black",
		width:10,
		borderWidth:30
	
}]

// 点击地图时候返回经纬度
const tap=(e)=>{
	console.log(e);
}
</script>

<style lang="scss" scoped>
map{
	// padding-top:70rpx;
	width:642rpx;
	height: 576rpx;
	border-radius: 30rpx;
	// border: 1rpx solid #000;
}
</style>